<template>
	<div class="check">
		<mu-appbar style="width: 100%;" color="primary">
			吉速车福
			<mu-menu slot="right">
				<mu-button flat>{{menu}}</mu-button>
				<mu-list slot="content">
					<mu-list-item button @click="loginOut">
						<mu-list-item-content>
							<mu-list-item-title>退出</mu-list-item-title>
						</mu-list-item-content>
					</mu-list-item>
				</mu-list>
			</mu-menu>
		</mu-appbar>
		<mu-form :model="form" class="mu-demo-form" label-position="left" label-width="100">
			<mu-form-item prop="orderId" label="订单号">
				<mu-text-field v-model="form.orderId" disabled></mu-text-field>
			</mu-form-item>
			<mu-form-item prop="subject" label="订单信息">
				<mu-text-field v-model="form.subject" :rows="2" disabled></mu-text-field>
			</mu-form-item>
			<mu-form-item prop="name" label="客户姓名">
				<mu-text-field v-model="form.name" disabled></mu-text-field>
			</mu-form-item>
			<mu-form-item prop="tell" label="联系方式">
				<mu-text-field v-model="form.tell" disabled></mu-text-field>
			</mu-form-item>
			<mu-form-item prop="plateNum" label="车牌号">
				<mu-text-field v-model="form.plateNum" disabled></mu-text-field>
			</mu-form-item>
			<mu-form-item prop="orderDate" label="预约时间">
				<mu-text-field v-model="form.orderDate" disabled></mu-text-field>
			</mu-form-item>
			<mu-form-item prop="address" :rows="2" label="取车地点">
				<mu-text-field v-model="form.address" disabled></mu-text-field>
			</mu-form-item>
		</mu-form>


		<div class="check_car" v-if="showUploadImg">
			<div class="check_font checkPic">
				<input class="fileInput" type="file" id="check_font" name="file" accept="image/*" @change="uploadImg_1" />
				<img :src="car_out_img" id="font_img" alt="">
				<span>上传一张您车辆的外部照片</span>
			</div>
			<div class="check_back checkPic">
				<input class="fileInput" type="file" id="check_back" name="file" accept="image/png,image/gif,image/jpeg" @change="uploadImg_2" />
				<img :src="car_in_img" id="back_img" alt="">
				<span>上传一张您车辆的内部照片</span>
			</div>
			<mu-circular-progress v-if="this.loading" class="loading demo-circular-progress" :size="36"></mu-circular-progress>
			
		</div>
		<mu-button round color="success" class="evaluate" @click="upload" v-if="showUploadImg">上传</mu-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				showUploadImg: false,
				car_out_img: '/static/images/camera.png',
				car_in_img: '/static/images/camera.png',
				menu: 'menu',
				employer: '',
				imgFile: [],
				form: {
					'orderId': '123123121',
					'subject': 'XXXXXX检车服务',
					'name': '利大厦',
					'tell': '11111111111',
					'plateNum': '与A5553',
					'orderDate': '2019-06-25',
					'address': '昌平区天露园二区'
				}
			}
		},
		created() {
			this.$ajax.get("/check-car/app/check/employer/orderInfo", {}).then((res) => {
				console.log(res.data)
				if (res.data.code == 200) {
					this.employer = res.data.user
					this.menu = res.data.user.name
					this.form.orderId = res.data.data.orderEntity.orderId
					this.form.subject = res.data.data.orderEntity.orderSubject
					this.form.name = res.data.data.userEntity.username
					this.form.tell = res.data.data.userEntity.mobile
					this.form.plateNum = res.data.data.userCarEntity.plateNum
					this.form.orderDate = res.data.data.orderEntity.orderTime
					this.form.address = res.data.data.orderEntity.visitAddress
					if(res.data.data.orderEntity.orderState == 3){
						this.showUploadImg = true
					}
				}
			})
		},
		methods: {
			uploadImg_1(e) {
				let file = e.target.files[0]
				console.log(file)
				lrz(file, {
					quality: 0.6
				}).then((res) => {
					console.log(res.base64,res.base64Len)
					this.imgFile[0] = res.base64
				}).catch((res) => {
					this.$toast.error('压缩失败');
					// this.upload_img(res.base64,res.base64Len)
				})
				
				this.$toast.info('照片上传成功')
			},
			uploadImg_2(e) {
				let file = e.target.files[0];
				lrz(file, {
					quality: 0.6
				}).then((res) => {
					console.log(res.base64,res.base64Len)
					this.imgFile[1] = res.base64
				}).catch((res) => {
					this.$toast.error('压缩失败');
					// this.upload_img(res.base64,res.base64Len)
				})
				console.log(file)
				this.$toast.info('照片上传成功')
			},
			upload() {
				console.log(this.imgFile)
				if(this.imgFile.length !=2){
					this.$toast.error('请先上传照片')
					return
				}
				this.loading = true
				this.$ajax.post('/check-car/app/check/uploadBeforeImge',
					{"carOutImg":this.imgFile[0],"carInImg":this.imgFile[1],"orderId": this.form.orderId},
					{timeout: 12000}).then((res)=>{
						this.loading = false
						if(res.data.code == 200){
							this.$toast.info('上传成功')
							window.location.reload()
						}else{
							this.$toast.error('上传失败')
						}
					})
			},loginOut(){
				localStorage.clear();
				this.$router.push({name:'login'})
			}
			
		},

	}
</script>

<style scoped>
	.mu-demo-form {
		margin-left: 10px;
		margin-top: 10px;
		width: 80%;
		max-width: 460px;
	}

	.sign_pic {
		width: 100%;
		height: 200px;
	}

	.sign_pic img {
		width: 100%;
		height: 100%;
	}

	.check_car {
		margin-top: 15px;
		height: 100px;
	}

	.check_car span {
		font-size: 10px;
	}

	.checkPic {
		position: relative;
		width: 160px;
		height: 100px;
		background-color: #00bcd4;
	}

	.check_font {
		float: left;
	}

	.checkPic img {
		width: 100%;
		height: 100%;
	}

	.check_back {
		float: right;
	}

	.checkPic .fileInput {
		width: 160px;
		height: 100px;
		position: absolute;
		right: 0;
		top: 0;
		opacity: 0;
	}

	.evaluate {
		height: 100%;
		margin-top: 50px;
		margin-left: 30%;
		width: 40%;
	}
</style>
